<script lang="ts" setup>
import { ref } from 'vue'
import popoverItem from './popover-item.jsx'
const visible = ref(false)
const list = ref(['1'])
</script>
<template>
  <div class="popover_main" v-for="(item, index) in list" :key="index">
    <el-popover v-model:visible="visible" placement="bottom" :width="200" trigger="hover">
      <template #reference>
        <div class="popover_item">
          <svg-icon name="echarts" color="#fff"></svg-icon>
        </div>
      </template>
      <popoverItem></popoverItem>
    </el-popover>
  </div>
</template>
<style lang="scss" scoped>
.popover_main {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  .popover_item {
    .icon-echarts {
      width: 30px;
      height: 30px;
    }
  }
}
</style>